<template>
    <div>
        <el-select v-model="selectedEnv" placeholder="请选择运行环境" @change="onEnvChange">
            <el-option 
                v-for="env in envList" 
                :label="env.name" 
                :value="env.value"
                :key="env.value"
            >
            
            </el-option>
        </el-select>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const selectedEnv = ref('')
const envList = ref([])

const editingApi = ref(null);
const isEditMode = ref(false);
const runningApi = ref(null);
const environments = ref([
    { id: 1, name: '开发环境', url: 'https://dev.api.example.com' },
    { id: 2, name: '测试环境', url: 'https://127.0.0.1:8090' },
    { id: 3, name: '预发布环境', url: 'https://stage.api.example.com' },
    { id: 4, name: '生产环境', url: 'https://api.example.com' }
]);
const currentEnvironment = ref(environments.value[0]);

onMounted(() => {
    envList.value = [
        {
            name: '开发环境',
            value: 'dev'
        },
        {
            name: '测试环境',
            value: 'test'
        },
        {
            name: '生产环境',
            value: 'prod'
        }
    ]
})

const onEnvChange = (val) => {
    console.log('selectedEnv', val)
}
</script>
